<template>
    <div id="app">
        <router-view />
        <van-tabbar v-model="active">
            <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
            <van-tabbar-item to="/collect" icon="star-o">收藏</van-tabbar-item>
            <van-tabbar-item to="/my" icon="setting-o">个人中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script setup>
import { ConfigProvider } from "vant";
import { ref, defineComponent, onBeforeMount, onMounted, computed, nextTick } from "vue";
import { useRouter } from "vue-router";
import { Tabbar, TabbarItem } from "vant";
import { useStore } from "vuex";
import { searchUserNickName, selectTokenUser } from "@/request/index";
import NewsListNormal from "./components/NewsListNormal.vue";
import { newsDetail } from "@/request/index";
let router = useRouter();
let active = ref(0);
const store = useStore();
// console.log(store.state.myRoute.newsList);
const theme = ref("black");
newsDetail().then((data) => {
    store.state.myRoute.newsList = data.rows;
});
if (localStorage.getItem("token")) {
    let loginUser = localStorage.getItem("token");
    selectTokenUser({ user_id: loginUser })
        .then((data) => {
            // console.log(data.rows[0], 55588);
            return data;
        })
        .then((content) => {
            // console.log(content, 4444);
            if (content.code == 200) {
                store.state.myRoute.loginObj = content.result[0];
            }
        });
}

onMounted(() => {
    nextTick(() => {
        let rname = router.currentRoute.value.name;
        if (rname == undefined) {
            let timer = setInterval(() => {
                rname = router.currentRoute.value.name;
                if (rname == undefined) {
                    console.log(rname, 666);
                } else {
                    clearInterval(timer);
                    timer = null;
                    if (rname == "home") {
                        active.value = 0;
                    } else if (rname == "search") {
                        active.value = 1;
                    } else if (rname == "collect") {
                        active.value = 2;
                    } else if (rname == "my") {
                        active.value = 3;
                    }
                }
            });
        } else {
            if (rname == "home") {
                active.value = 0;
            } else if (rname == "search") {
                active.value = 1;
            } else if (rname == "attention") {
                active.value = 2;
            } else if (rname == "my") {
                active.value = 3;
            }
        }
    });
});
</script>
<style lang="scss">
@import url(./static/style/reset.css);
@import "./static/style/variable.scss";

html {
    font-size: 37.5px;
}
.van-tabbar-item {
    color: $activeColor;
}
#app {
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    .van-tabbar-item--active {
        color: #d1d1d1;
    }
    .van-tabs__line {
        background-color: #7c7c7c;
    }
}
</style>
